<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
    <style>
        /* 重置样式 */
        body{
            margin: 0;
            padding: 0;
        }
        /* 公共样式 */
        table,tr,th,td{
            border: 1px solid #ccc;
            border-collapse: collapse;
            border-spacing: 0;
        }
        /* 业务样式 */
        /* 设置购物车的宽度和边框 */
        .cart{
            margin: 20px auto;
            width: 600px;
            border: 1px solid #eee;
        }
        /* 设置表格主题 */
        .cart caption{
            font-size: 20px;
            font-weight: bold;
        }
        /* 设置表头的样式 */
        .cart th{
            padding:5px 20px;
            color: #666;
            background-color: #f7f7f7
        }
        /* 设置表格内容的样式 */
        .cart td{
            padding: 10px 20px;
            
        }
        /* 设置最后一行 */
        .right{
            text-align: right;
        }


        

    </style>
</head>
<body>
    <div id="app">
        <table class="cart">
            <caption>购物车</caption>
            <tr>
                <th></th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <tr v-for = "(book,index) in books" :key="book.id">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.date}}</td>
                <td>{{getPrice(book.price)}}</td>
                <td>
                <button @click="book.count > 1 ? book.count-- : ''">-</button>
                {{book.count}}
                <button @click="book.count++">+</button>
                 </td>
                <td>
                <button @click="books.splice(index, 1)">移除</button>
                </td>
            </tr>
            <tr>
                <td v-if = "books.length" colspan="6" class="right">总价格：{{formatPrice(total)}}</td>
                <td v-else colspan="6">购物车中没有商品</td>
            </tr>
        </table>

    </div>
    <script>
        const app = Vue.createApp({
            data(){
                return{
                    books:[
                        { id: 1, name: '算法导论', date: '2006-9', price: 85.3, count: 5 },
                        { id: 2, name: 'Unix编程艺术', date: '2006-2', price: 59, count: 2 },
                        { id: 3, name: '编程珠玑', date: '2008-10', price: 39, count: 1 },
                    ]
                }
            },
           methods: {
          getPrice(value) {
            return '¥' + Number(value).toFixed(2)
          },
        },
        computed: {
          // 格式化价格
          formatPrice() {
            // 带参数的计算属性: 返回一个函数
            return (value) => {
              return '¥' + Number(value).toFixed(2)
            }
          },
          // formatPrice(value) {
          //   console.log(value)
          //   return '¥' + Number(value).toFixed(2)
          // },
          total() {
            return this.books.reduce((pre, curr) => pre + curr.count * curr.price, 0)
          },
        },
      }).mount('#app')


    </script>
</body>
</html>
